<template>
    <div class="myStudy">
        <Title2>
            <div slot="back">
                <van-icon name="arrow-left" @click="$router.go(-1)"/>
            </div>
            <div slot="title">我的学习</div>
            <van-icon name="notes-o" slot="search" />
        </Title2>
        <van-tabs v-model="active" swipeable @change="change">
            <van-tab v-for="item in tabs" :title="`${item.name}(${item.num})`" :key="item.id">
                <div v-if="courseList.length>0" class="content">
                    <div v-for="item in courseList" :key="item.course_id">
                        <h3>{{item.title}}</h3>
                        <p>
                            <van-icon name="clock-o" />
                            <span>{{item.start_play_date | fomartTime("yyyy-MM-dd hh:mm")}}--{{item.end_play_date | fomartTime("yyyy-MM-dd hh:mm")}}  |  共{{item.today_course_num}}课时</span>
                        </p>
                    </div>
                </div>
                <div v-else class="empty">
                    <img src="../../assets/images/empty.png" alt="">
                    <p>还没有课程,快去选择课程吧</p>
                    <button @click="$router.push('/course')">选择课程</button>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import Title2 from '../../components/common/Title2';
import {getMyStudy} from '../../untils/netWork';
    export default {
        data:()=>({
            active:"",
            tabs:[],
            courseList:[],
            type:2
        }),
        components:{
            Title2
        },
        mounted(){
            getMyStudy(this.type).then(res=>{
                this.tabs=res.data.typeNum;
                this.courseList=res.data.courseList;
            })
        },
        methods:{
            change(a,b){
                this.type=this.tabs[a].type
                getMyStudy(this.type).then(res=>{
                    this.courseList=res.data.courseList;
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
.content{
    width: 90%;
    margin: 10px auto;
    div{
        padding: 10px;
        box-shadow:2px 2px 10px 5px rgba(240,240,240);
        margin-bottom: 10px;
    }
    h3{
        margin: 10px 0;
    }
    .van-icon{
        margin-right: 5px;
    }

}
.empty{
    width: 90%;
    margin: 0 auto;
    text-align: center;
    img{
        width: 50%;
        padding-top: 100px;
        padding-bottom: 20px;
    }
    button{
        margin-top: 20px;
        width: 100px;
        height: 30px;
        background: orangered;
        color: white;
        outline: none;
        border: 0;
        border-radius: 10px;
    }
}
</style>